<template>
  <div class="app-container">
    <!-- 添加或修改 校本教研活动对话框 -->
    <el-divider content-position="left">教研活动</el-divider>
    <el-form ref="form" :model="form" :rules="rules" label-width="100px" :disabled="!update">
      <el-row>
        <el-col :span="8">
          <el-form-item label="教研组" prop="groupName">
            <el-input v-model="form.groupName" placeholder="请输入教研组" readOnly @focus="this.showGroupSelect"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="活动主题" prop="subject">
            <el-input v-model="form.subject" placeholder="请输入活动主题"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="活动时间" prop="activityTime">
            <el-date-picker clearable
                            v-model="form.activityTime"
                            style="width: 100%"
                            type="date"
                            value-format="yyyy-MM-dd"
                            placeholder="请选择活动时间">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="活动地点" prop="activityAddress">
            <el-input v-model="form.activityAddress" placeholder="请输入活动地点"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="主备人" prop="mainName">
            <el-input v-model="form.mainName" placeholder="请输入主备人" readOnly @focus="showMainAndRecord('main')"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="记录人" prop="recordName">
            <el-input v-model="form.recordName" placeholder="请输入记录人" readOnly @focus="showMainAndRecord('record')"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="参会领导" prop="leaderName">
            <el-input v-model="form.leaderName" placeholder="请输入参会领导" readOnly @focus="showAllUserSelect('leader')"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="参会成员" prop="teacherName">
            <el-input v-model="form.teacherName" placeholder="请输入参会成员" readOnly @focus="showAllUserSelect('actual')"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="缺勤人员" prop="absenceName">
            <el-input v-model="form.absenceName" placeholder="请输入缺勤人员" readOnly @focus="showGroupUserSelect('absence')"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="请假人员" prop="leaveName">
            <el-input v-model="form.leaveName" placeholder="请输入请假人员" readOnly @focus="showGroupUserSelect('leave')"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="迟到人员" prop="lateName">
            <el-input v-model="form.lateName" placeholder="请输入迟到人员" readOnly @focus="showGroupUserSelect('late')"/>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="备注" prop="remark">
            <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-form-item label="活动内容" require>
          <FormFileUpload ref="contentFile" :readOnly="readOnly" :businessType="businessType" childType="content" :businessId="form.id"/>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="活动照片" required>
          <FormFileUpload ref="imgFile" type="img" :businessType="businessType" childType="img" :businessId="form.id"/>
        </el-form-item>
      </el-row>
    </el-form>
    <el-divider content-position="left">审核信息</el-divider>
    <el-form ref="auditForm" :model="form" label-width="100px" :disabled="!audit">
      <el-row>
        <el-col :span="8">
          <el-form-item label="审核状态" prop="auditState">
            <el-select v-model="form.auditState" placeholder="请选择审核状态" style="width: 100%" disabled>
              <el-option
                v-for="dict in dict.type.sys_process_status"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="审核意见" prop="auditMsg">
            <el-input v-model="form.auditMsg" placeholder="请输入审核意见"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleAudit('2')" v-if="audit">通 过</el-button>
      <el-button type="danger" @click="handleAudit('3')" v-if="audit">驳 回</el-button>
      <el-button type="primary" @click="submitForm" v-if="update">保 存</el-button>
      <el-button @click="goBack">关 闭</el-button>
    </div>

    <!-- 主备人、记录人选择-->
    <JyGroupTeacherSelect ref="mainAndRecordSelect" required @selection-change="handleMainAndRecordSelectChange"/>
    <!--    教研组选择-->
    <JyResearchGroupSelect ref="groupSelect" required @selection-change="handleGroupSelectChange"/>
    <!--    缺勤人员、请假人员、迟到人员 选择-->
    <JyGroupTeacherSelect ref="groupUserSelect" multiple @selection-change="handleGroupUserSelectChange"/>
    <!--参会领导、参会成员-->
    <JyTeacherSelect ref="allUserSelect" multiple required @selection-change="handleAllUserSelectChange"></JyTeacherSelect>
  </div>
</template>

<script>
  import {getYSchoolResearchActivity, addYSchoolResearchActivity, updateYSchoolResearchActivity, auditYSchoolResearchActivity} from "@/api/research/ySchoolResearchActivity"
  import FormFileUpload from '@/components/FileUpload/FormFileUpload.vue'
  import JyResearchGroupSelect from '@/views/research/jyResearchGroup/JyResearchGroupSelect.vue'
  import JyGroupTeacherSelect from '@/views/research/jyTeacher/JyGroupTeacherSelect.vue'
  import JyTeacherSelect from "@/views/research/jyTeacher/JyTeacherSelect.vue"
  import {goBackMixin, editMixin} from "@/mixins/ListEditMixin.js"

  export default {
    name: "JySchoolResearchActivityEdit",
    dicts: ['sys_process_status'],
    components: {FormFileUpload, JyResearchGroupSelect, JyGroupTeacherSelect, JyTeacherSelect},
    mixins: [goBackMixin, editMixin],
    data() {
      return {
        businessType: "jy_school_research_activity",
        loading: true,       // 遮罩层
        showSearch: true,     // 显示搜索条件
        total: 0,      // 总条数
        ySchoolResearchActivityList: [],    //  校本教研活动表格数据
        title: "",        // 弹出层标题
        open: false, // 是否显示弹出层
        daterangeActivityTime: [],       // 备注时间范围
        form: {}, // 表单参数
        rules: {  // 表单校验
          groupId: [
            {required: true, message: "教研组Id不能为空", trigger: "blur"}
          ],
          groupName: [
            {required: true, message: "教研组不能为空", trigger: "blur"}
          ],
          subject: [
            {required: true, message: "活动主题不能为空", trigger: "blur"}
          ],
          activityTime: [
            {required: true, message: "活动时间不能为空", trigger: "blur"}
          ],
          activityAddress: [
            {required: true, message: "活动地点不能为空", trigger: "blur"}
          ],
          mainId: [
            {required: true, message: "主备人不能为空", trigger: "blur"}
          ],
          mainName: [
            {required: true, message: "主备人不能为空", trigger: "blur"}
          ],
          recordId: [
            {required: true, message: "记录人不能为空", trigger: "blur"}
          ],
          recordName: [
            {required: true, message: "记录人不能为空", trigger: "blur"}
          ],
          teacherName: [
            {required: true, message: "参会成员不能为空", trigger: "blur"}
          ],
        }
      }
    },
    mounted() {
      this.iniData()
    },
    methods: {
      iniData() {//初始化数据
        if (this.$route.params.id > 0) {
          console.log("rrrrrrrrr")
          getYSchoolResearchActivity(this.$route.params.id)
            .then(res => {
              console.log("rrrrr3333333333rrrr", res)
              this.form = res.data
            })
            .catch(err => {
              console.log("3222222", err)
            })
        } else {
          console.log("1111111")
          this.form = {
            id: null,
            groupId: null,
            groupName: null,
            subject: null,
            activityTime: null,
            activityAddress: null,
            mainId: null,
            mainName: null,
            recordId: null,
            recordName: null,
            leaderName: null,
            teacherName: null,
            absenceName: null,
            leaveName: null,
            lateName: null,
            dueAmount: null,
            actAmount: null,
            auditState: null,
            auditMsg: null,
            deptId: null,
            delFlag: null,
            createBy: null,
            createTime: null,
            updateBy: null,
            updateTime: null,
            remark: null
          }
        }
      },


      /** 提交按钮 */
      submitForm() {
        this.form.contentFileList = this.$refs.contentFile.getFileList();
        this.form.imgFileList = this.$refs.imgFile.getFileList();

        this.$refs["form"].validate(valid => {
          if (valid) {
            this.$modal.confirm('保存后数据不可更改，是否确认进行保存？')
              .then(response => {
                this.$modal.loading()
                return this.form.id != null ? updateYSchoolResearchActivity(this.form) : addYSchoolResearchActivity(this.form)
              })
              .then(response => {
                this.$modal.closeLoading()
                this.$modal.msgSuccess("保存成功")
                this.goBack(true)
              }).catch(err => {
              this.$modal.closeLoading()
            });
          }
        })
      },
      handleAudit(auditState) {//审核
        this.$modal.loading()
        this.form.auditState = auditState
        auditYSchoolResearchActivity(this.form)
          .then(response => {
            this.$modal.closeLoading()
            this.$modal.msgSuccess("审核成功")
            this.goBack(true)
          })
          .catch(err => {
            this.$modal.closeLoading()
          });
      },

      showMainAndRecord(type) {//主备人/记录人
        if (!this.form.groupId) {
          this.$modal.msgError("请选择教研组")
          return
        }
        let option = {id: this.form.groupId}
        this.showType = type
        this.$refs.mainAndRecordSelect.show(option)
      },
      showGroupSelect() {//教研组
        this.$refs.groupSelect.show()
      },
      showGroupUserSelect(type) {//缺勤人员/请假人员/迟到人员
        if (!this.form.groupId) {
          this.$modal.msgError("请选择教研组")
          return
        }
        let option = {id: this.form.groupId}
        this.showType = type
        this.$refs.groupUserSelect.show(option)
      },
      showAllUserSelect(type) {//参会成员、参会领导
        this.showType = type
        this.$refs.allUserSelect.show()
      },
      //参与领导        leader
      //参会成员        actual
      //请假人员        leave
      //迟到人员        late
      //缺勤人员        absence
      handleMainAndRecordSelectChange(select) {//主备人/记录人
        console.log("11111", select)
        if (this.showType == 'main') {
          this.form.mainId = select.id;
          this.form.mainName = select.name;
        } else if (this.showType == 'record') {
          this.form.recordId = select.id;
          this.form.recordName = select.name;
        } else {
          this.$modal.msgError("类型错误：", type)
        }
      },
      handleGroupSelectChange(select) {
        console.log("222", select)
        this.form.groupId = select.id
        this.form.groupName = select.name
      },
      handleGroupUserSelectChange(select) {//缺勤人员/请假人员/迟到人员
        console.log("333", select)
        if (this.showType == 'absence') {//缺勤人员
          this.form.absenceUserList = select;
          this.form.absenceName = select.map(item => item.name).join()

        } else if (this.showType == 'late') {//迟到人员
          this.form.lateUserList = select;
          this.form.lateName = select.map(item => item.name).join()
        }
        if (this.showType == 'leave') {// 请假人员
          this.form.leaveUserList = select;
          this.form.leaveName = select.map(item => item.name).join()
        } else {
          this.$modal.msgError("类型错误：", type)
        }
      },
      handleAllUserSelectChange(select) {//参会成员、参会领导
        console.log("444", select)
        if (this.showType == 'leader') {//参与领导
          this.form.leaderUserList = select;
          this.form.leaderName = select.map(item => item.name).join()
        }
        if (this.showType == 'actual') {// 参会成员
          this.form.teacherUserList = select;
          this.form.teacherName = select.map(item => item.name).join()
        } else {
          this.$modal.msgError("类型错误：", type)
        }
      }

    }
  }
</script>
